<template>
  <el-main v-loading="loading">
    <div class="list" v-show="isEdit">
      <label for="" class="list-item"><i>企业ID：</i></label>
      <div class="input-width" v-text="comParams.id"></div>
    </div>
    <div class="list">
      <span></span>
      <label for="" class="list-item require"><i>企业名称：</i></label>
      <el-input class="input-width" v-model="comParams.name" placeholder="请输入内容"></el-input>
    </div>
    <div class="list">
      <span></span>
      <label for="" class="list-item require"><i>企业地址：</i></label>
      <el-input class="input-width" v-model="comParams.address" placeholder="请输入内容"></el-input>
    </div>
    <div class="list">
      <label for="" class="list-item require"><i>公司性质：</i></label>
      <el-select v-model="comParams.property" placeholder="全部">
        <el-option
          v-for="item in propertyList"
          :key="item.id"
          :label="item.dValue"
          :value="item.dKey">
        </el-option>
      </el-select>
    </div>
    <div class="list">
      <label for="" class="list-item require"><i>公司类型：</i></label>
      <el-select v-model="comParams.type" placeholder="全部">
        <el-option
          v-for="item in typeList"
          :key="item.id"
          :label="item.dValue"
          :value="item.dKey">
        </el-option>
      </el-select>
    </div>
    <div class="list">
      <label for="" class="list-item require"><i>是否上市：</i></label>
      <el-select v-model="comParams.ipo" placeholder="全部">
        <el-option
          v-for="item in ipoList"
          :key="item.id"
          :label="item.dValue"
          :value="item.dKey">
        </el-option>
      </el-select>
    </div>
    <div class="list">
      <span></span>
      <label for="" class="list-item require"><i>联系电话：</i></label>
      <el-input class="input-width" v-model="comParams.mobile" placeholder="请输入内容"></el-input>
    </div>
    <div class="list">
      <span></span>
      <label for="" class="list-item require">销售电话：</label>
      <el-input class="input-width" v-model="comParams.saleMobile" placeholder="请输入内容"></el-input>
    </div>
    <div class="list">
      <label for="" class="list-item require">注册资本：</label>
      <el-input class="input-width" v-model="comParams.capital" placeholder="请输入内容"></el-input>
    </div>
    <div class="list">
      <label for="" class="list-item require">营业执照：</label>
      <div class="avatar-uploader" v-if="!comParams.license">
        <div tabindex="0" class="el-upload el-upload--text">
          <label for="upPhoto" class="el-icon-plus avatar-uploader-icon"></label>
          <input @change="fileChange" type="file" name="file" class="el-upload__input" id="upPhoto"/>
        </div>
      </div>
      <img v-if="comParams.license" :src="comParams.license" class="avatar">
      <span v-if="comParams.license" class="photoDel" @click="delPhoto">删除</span>
    </div>
    <div class="list">
      <label class="list-item require">公司简介：</label>
        <el-input
          type="textarea"
          :rows="2"
          size="medium"
          placeholder="请输入内容"
          v-model="comParams.intro">
        </el-input>
    </div>
    <div class="list box-last">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click='back'>取消</el-button>
    </div>
  </el-main>
</template>

<script>
import { propertyList, typeList, ipoList } from 'data/listBody'
import { comParams } from 'data/companyParams'
import { FileChange } from "utils/formData";
import post from 'utils/post'
import put from 'utils/put'
import queryList from 'utils/queryList'
import upyun from 'data/upyun'
export default {
  name: 'addOrEditCom',
  data() {
    return {
      propertyList,
      typeList,
      ipoList,
      loading: false,
      comParams: JSON.parse(JSON.stringify(comParams)),
      upyun,
      isEdit: this.$route.query.type === 'edit',
      fileList: []
    }
  },
  created() {
    if(this.isEdit) this.init()
  },
  methods: {
    init() {
      this.comParams.id = this.$route.query.id
      queryList(`company/${this.comParams.id}`).then((res) => {
        this.comParams = res.data.data
      }).catch((err) => {
        this.$message(err.data.message)
      })
    },
    fileChange(e){
      this.loading = true;
      FileChange(e, (res) => {
        this.loading = false;
        this.comParams.license = res.url;
      })
    },
    delPhoto(){
      this.comParams.license = '';
    },
    upLoadSuccess(response, file, fileList) {
      console.log(response)
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    back() {
      this.$router.back()
    },
    submit() {
      var mes = '系统繁忙，请稍后再试'
      if (this.isEdit) {
        put('company', this.comParams).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) mes = '操作成功';
        this.$message(mes)
        }).catch((err) => {
          console.log(err)
          this.$message(err.data.message)
        })
      } else {
        post('company', this.comParams).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) mes = '操作成功';
        this.$router.push('comList')
        this.$message(mes)
        }).catch((err) => {
          console.log(err)
          this.$message(err.data.message)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../../../assets/less/input.less');
.id{
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
}
.box-last{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.photoDel{
  margin-left: 20px;
  cursor: pointer;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
